<script setup lang="ts">
withDefaults(
  defineProps<{ bg?: "transparent" | "half-transparent" | "no-transparent" }>(),
  { bg: "half-transparent" }
);
</script>

<template>
  <div
    class="fixed inset-0 z-10"
    :class="{
      'bg-black/30': bg === 'half-transparent',
      'bg-transparent': bg === 'transparent',
      'bg-gray-50': bg === 'no-transparent',
    }"
  >
    <slot></slot>
  </div>
</template>
